<template>
    <div>
        <Form ref="form" :model="rescData" :label-width="90" style="height:30px">
            <Row :gutter="24" type="flex" justify="end">
            <Col v-bind="grid">
                    <FormItem label="组件名称：">
                        <Input v-model="rescData.rescTitle" placeholder="请输入组件名称" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="组件编码：" >
                        <Input v-model="rescData.rescCode" maxlength="20" placeholder="请输入组件编码" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem >
                        <Button type="default" icon="md-search" style="margin-left:5px" @click="handleSubmit"></Button>&nbsp;&nbsp;
                        <Button type="default" icon="md-refresh" @click="handleReset"></Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>  
        <Table
            ref="table"
            :columns="tableColumns"
            :data="list"
            :loading="loading"
            :size="tableSize"
            class="ivu-mt"
            @on-select="handleSelect"
            @on-select-cancel="handleSelectCancel"
            @on-select-all="handleSelectAll"
            @on-select-all-cancel="handleClearSelect">
            <template slot-scope="{ row }" slot="name">
                {{ row.rescTitle }}
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
            <Page
                :total="pageNation.total"
                :page-size-opts="pageSizeOpts"
                :current.sync="current"
                show-total
                show-sizer
                show-elevator
                :page-size="pageNation.pageSize"
                @on-change="handleChangePage"
                @on-page-size-change="handleChangePageSize"
            />
        </div>
    </div>
</template>
<script>
    import {mapState} from "vuex";
    export default {
        data () {
            return {
                grid: {
                    xl: 8,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                rescData: {
                    id: '',
                    rescTitle: '',
                    rescCode: '',
                    rescDescrib: ''
                },
                columns: [
                    {type: 'selection',minWidth: 60,align: 'center',show: true},
                    {title: '组件名称',key: 'rescTitle',slot: 'name',minWidth: 140,show: true},
                    {title: '组件编码',key: 'rescCode',minWidth: 120,show: true},
                    {title: '组件描述',key: 'rescDescrib',minWidth: 140,show: false},
                    {title: '创建时间',key: 'createTime',minWidth: 200,show: false},
                    {title: '组件 ID',key: 'id',minWidth: 120,show: false},
                ],
                loading: false,
                list: [],
                selectedData: [],
                current: 1,
                limit: 10,
                total: 0,
                tableSize: 'default',
                resourceInfo: null, // 当前选中的组件信息
                resourceInfoString: '', // 当前选中的组件信息字符串
                resourceInfoFormReady: true,
                submitting: false,
                pageSizeOpts:[10,30,50,100],
                pageNation:{total:0,pageSize:10,pageNumber:1},
                resourceCond: {
                    condition: {
                        className:'Resource',
                        value: {}
                    }
                },
                selectedCtrlData:[]
            }
        },
        props: {
            selectedCtrlIds:{
                default:()=>{
                    return []
                }
            }            
        },  
        computed: {
            ...mapState('admin/api', [
                'api'
            ]),
            // 动态设置列
            tableColumns () {
                const columns = [...this.columns];
                return columns.filter(item => item.show);
            },
            offset () {
                return (this.current - 1) * this.limit;
            }
        },
        methods: {
            getData () {
                if (this.loading) return;
                this.loading = true;
                // 下面的 params 是获取的表单查询参数
                this.list =[];
                const params = this.rescData;
                let value= {};
                if(params.rescTitle !=null && params.rescTitle !="" ){
                    value['rescTitle'] = params.rescTitle;
                }
                if(params.rescCode !=null && params.rescCode !="" ){
                    value['rescCode'] = params.rescCode;
                }
                let paras = {};
                paras['className'] = 'Resource';
                paras['value'] =value;
                paras['pageNumber'] = this.pageNation.pageNumber;
                paras['pageSize'] = this.pageNation.pageSize;
                this.$ajax('authInstance.list', paras).then((resp) => {
                    let tempData = resp.data.dataList
                    // 2.转换数据格式
                    if(tempData.length > 0){
                        tempData.forEach((item)=>{
                            var newObj = {id:item.id,createTime:item.createTime,updateTime:item.updateTime};
                            Object.keys(item.value).forEach(key => {
                                newObj = Object.assign(newObj,item.value[key]);
                            });
                            let ids = this.selectedCtrlIds.filter(id => id==newObj.id);
                            if(ids.length>0){
                                newObj._checked = true;
                                 this.selectedCtrlData.push(newObj);
                            }else{
                                newObj._checked = false;
                            }
                            this.list.push(newObj);
                        })
                    }else {
                        this.list = [];
                    }
                    this.pageNation.total = resp.data.totalRow;
                    this.pageNation.pageNumber = resp.data.pageNumber;
                    this.pageNation.pageSize = resp.data.pageSize;
                });
                this.loading = false;
            },
            handleSubmit () {
                 this.getData();
            },
            handleReset () {
                this.fileData={};
                this.getData();
            },
            // 刷新表格数据
            handleRefresh () {
                this.getData();
            },
            // 切换页码
            handleChangePage (page) {
                this.current = page;
                this.getData();
            },
            // 切换每页条数
            handleChangePageSize (size) {
                this.current = 1;
                this.limit = size;
                this.getData();
            },
            // 选中一项，将数据添加至已选项中
            handleSelect (selection, row) {
                this.selectedCtrlData.push(row);
            },
            // 取消选中一项，将取消的数据从已选项中删除
            handleSelectCancel (selection, row) {
                const index = this.selectedCtrlData.findIndex(item => item.id === row.id);
                this.selectedCtrlData.splice(index, 1);
            },
            // 当前页全选时，判断已选数据是否存在，不存在则添加
            handleSelectAll (selection) {
                selection.forEach(item => {
                    if (this.selectedCtrlData.findIndex(i => i.id === item.id) < 0) {
                        this.selectedCtrlData.push(item);
                    }
                });
            },
            handleGetCtrlIds(ids) {
                this.selectedCtrlData.forEach(item => {
                    if (ids.indexOf(item.id) == -1) {
                        ids.push(item.id);
                    }
                });
                return ids;
            }, 
            // 清空所有已选项
            handleClearSelect () {
                this.selectedCtrlData = [];
            },
            // 查找单一组件信息
            handleGetUser (id) {
                return this.list.find(item => item.id === id);
            },
        }
    }
</script>
<style lang="less">
    .page-sys-user{
        &-drawer{
            &-footer{
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                border-top: 1px solid #e8e8e8;
                padding: 10px 16px;
                text-align: right;
                background: #fff;
            }
            &-form{
                .ivu-input[disabled], fieldset[disabled] .ivu-input, .ivu-select-disabled .ivu-select-selection{
                    background-color: #fff;
                    color: inherit;
                }
                &-region{
                    .i-region-transfer{
                        width: 270px;
                    }
                    .i-region-drop-main{
                        width: 270px !important;
                        height: 200px;
                        overflow: auto;
                        column-count: 2;
                        &-item{
                            line-height: normal;
                        }
                    }
                }
            }
        }
    }
</style>
